<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>todolist</title>
	<link rel="stylesheet" href="./css/004main.css">
	<style type="text/css">
		.list_con {
			width: 600px;
			margin: 50px auto 0;
		}

		.inputtxt {
			width: 550px;
			height: 30px;
			border: 1px solid #ccc;
			padding: 0px;
			text-indent: 10px;
		}

		.inputbtn {
			width: 40px;
			height: 32px;
			padding: 0px;
			border: 1px solid #ccc;
		}

		.list {
			margin: 0;
			padding: 0;
			list-style: none;
			margin-top: 20px;
		}

		.list li {
			height: 40px;
			line-height: 40px;
			border-bottom: 1px solid #ccc;
		}

		.list li span {
			float: left;
		}

		.list li a {
			float: right;
			text-decoration: none;
			margin: 0 10px;
		}
		/*------------------------------------------------------------------------------------*/
	</style>
	<script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function () {
			var target = '';
			var i = 0;
			var changehtml = '';
			//列表增加功能
			$('.inputbtn').click(function () {
				var text = $('.inputtxt').val();
				if (text == '') {
					alert('内容不能为空')
				} else {
					// $('.list').prepend('<li><span>'+text+'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>')
					$('.list').prepend('<li><span>' + text + '</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a><a href="javascript:;" class="change">编辑</a></li>')
					$('.inputtxt').val('');
				}
			})

			//列表 排序以及删除操作  (后加的列表没有被点击事件监听. 需要父级代理事件)
			$('.list').delegate('a', 'click', function () {
				// console.log($(this).prop('class'))
				switch ($(this).prop('class')) {
					case 'up':
						var prev = $(this).parent().prev();
						if (prev.length == 0) {
							alert('已经是在顶部了');
							return;
						} else {
							$(this).parent().insertBefore(prev);
						}
						break;
					case 'down':
						var next = $(this).parent().next();
						if (next.length == 0) {
							alert('已经是在底部了');
							return;
						} else {
							$(this).parent().insertAfter(next);
						}
						break;
					case 'del':
						$(this).parent().remove();
						break;
					case 'change':
						$('.pop_main').addClass('changemoving')

						target = $(this).parent().children('span');

						var values = target.html();

						$('.pop_input').val(values);

						break;

					default:
						break;
				}

			})

			$('.sure').click(function () {
				changehtml = $('.pop_input').val();
				console.log(i)
				target.html(changehtml);
				$('.pop_main').removeClass('changemoving');
				++i
			})

			$('.cen').click(function () {
				$('.pop_main').removeClass('changemoving');
			})

		})
	</script>
</head>

<body>

	<div class="pop_main" id="pop">
		<div class="pop_con">
			<div class="pop_title">
				<h3>系统提示</h3>
				<a href="#" id="shutoff">×</a>
			</div>
			<div class="pop_detail">
				<p class="pop_text">修改为</p>
				<input type="text" class="pop_input">
			</div>
			<div class="pop_footer">
				<div class="cen">取消</div>
				<div class="sure">确定</div>
			</div>
		</div>
		<div class="mask"></div>
	</div>
	<div class="list_con">
		<h2>To do list</h2>
		<input type="text" name="" id="txt1" class="inputtxt">
		<input type="button" name="" value="增加" id="btn1" class="inputbtn">

		<ul id="list" class="list">

			<li>
				<span>学习html</span>
				<a href="javascript:;" class="up"> ↑ </a>
				<a href="javascript:;" class="down"> ↓ </a>
				<a href="javascript:;" class="del">删除</a>
				<a href="javascript:;" class="change">编辑</a>
			</li>
			<li>
				<span>学习css</span>
				<a href="javascript:;" class="up"> ↑ </a>
				<a href="javascript:;" class="down"> ↓ </a>
				<a href="javascript:;" class="del">删除</a>
				<a href="javascript:;" class="change">编辑</a>
			</li>
			<li>
				<span>学习javascript</span>
				<a href="javascript:;" class="up"> ↑ </a>
				<a href="javascript:;" class="down"> ↓ </a>
				<a href="javascript:;" class="del">删除</a>
				<a href="javascript:;" class="change">编辑</a>
			</li>
		</ul>

	</div>




</body>

</html>